<template>
  <el-aside :width="sidebar.isCollapse ? '64px' : '240px'">
    <div style="padding: 10px 0; text-align: center">
      <img src="/src/assets/logo/logo.png" style="width: 50px; height: 45px" />
      <span
        v-show="!sidebar.isCollapse"
        style="
          font-size: 1.4em;
          font-weight: 700;
          color: rgb(56, 18, 110);
          margin-left: 10px;
        "
        >WarmVax
      </span>
    </div>

    <el-menu
      @select="handleSelect"
      :default-active="activeTab"
      :collapse="sidebar.isCollapse"
      class="aside-vertical-menu"
    >
      <template v-for="(topMenu, index) in topMenuList">
        <el-sub-menu
          v-if="topMenu.children && topMenu.children.length"
          :key="index"
          :index="topMenu.name"
        >
          <template #title>
            <el-icon>
              <component :is="topMenu.meta.icon" />
            </el-icon>
            <span>{{ topMenu.meta.title }}</span>
          </template>

          <el-menu-item
            v-for="child in topMenu.children"
            :key="child.name"
            :index="child.name"
          >
            <el-icon>
              <component :is="child.meta.icon" />
            </el-icon>
            <span>{{ child.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :key="index + 1" :index="topMenu.name">
          <el-icon>
            <component :is="topMenu.meta.icon" />
          </el-icon>
          <span>{{ topMenu.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useSidebarStore } from '@/stores/sidebar'
import { useRoute, useRouter } from 'vue-router'
import { useTabsStore } from '@/stores/tabs.js'

const sidebar = useSidebarStore()
//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
/*****
 * 通过计算属性来从路由表中获取左侧的菜单信息：
 * 注：这里只获取一级菜单项，要把子菜单项给过滤掉。
 * 判断route中的meta对象中的top属性来判断是否是顶级菜单项
 */
const topMenuList = computed(() => router.getRoutes().filter((r) => r.meta.top))
console.log(topMenuList, 'topMenuList....', router.getRoutes())

/*************************
 * 处理菜单中的点击事件，当点击左侧的菜单时，需要把当前点击的菜单项添加到tabs中，并且采用编程式路由进行跳转、
 * 注：此方法只有当点击在 <el-menu-item>标签上时才会触发, 在<el-sub-menu>标签上，则不会触发
 */
const handleSelect = (index) => {
  console.log('>>你点击的菜单项是: ', index)
  console.log('>>>当前routes:', topMenuList.value)
  //找到你点击的菜单项，如果有子菜单项，则找到子菜单项。 这里的r.children? 使用了可选链操作符 (Optional Chaining Operator)。
  //它的作用是简化属性访问和方法调用时的条件判断，避免出现 undefined 或 null 导致的错误。它相当于：r.children && r.children.some(child => child.name === index)
  const menuRoute = topMenuList.value.find(
    (r) => r.name === index || r.children?.some((child) => child.name === index)
  )
  console.log('1. 你点击菜单对的路由对象: ', menuRoute)
  // 上面拿到的路由对象，则topMenu，接下来要判断当前点击的菜单项是否是子菜单项，如果是子菜单项，则需要找到子菜单项对应的路由对象
  const childRoute = menuRoute?.children?.find((child) => child.name === index)
  console.log('2. 你点击菜单项的子菜单项: ', childRoute)
  // 根据判断结果，选择正确的路由对象
  const selectedRoute = childRoute || menuRoute
  console.log('3. 真正点击的路由: ', selectedRoute)
  if (selectedRoute && selectedRoute.meta) {
    //调用pinia中的标签管理中的添加标签的方法，把你选择的菜单项添加到tabs中
    //tabsStore.addTab(selectedRoute)
    tabsStore.addTab({
      title: selectedRoute.meta.title,
      name: selectedRoute.name,
    })
    // 编程式路由跳转
    router.push({ name: selectedRoute.name })
  }
}

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log('================ activeTab: ', activeTab.value)
</script>
<style lang="less" scoped>
.aside-vertical-menu:not(.el-menu--collapse) {
  /* width: 225px;
  min-height: 100vh; */
  width: 235px;
  min-height: 100vh;
  border-color: transparent;
}

/* 侧边栏滚动条隐藏 */
.el-aside::-webkit-scrollbar {
  display: none;
}

.el-aside {
  background-color: #f2f2f2;
}
</style>
